<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RPGLogic 系统架构思维导图</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#8B5CF6',
                        neutral: '#6B7280',
                        'neutral-light': '#F3F4F6',
                        'primary-dark': '#2563EB',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.5s ease-in-out',
                        'slide-in': 'slideIn 0.3s ease-in-out',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideIn: {
                            '0%': { transform: 'translateY(10px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        },
                    },
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .tree-node {
                @apply relative p-4 rounded-lg shadow-md transition-all duration-300 hover:shadow-lg cursor-pointer overflow-hidden;
            }
            .tree-node-primary {
                @apply bg-primary text-white;
            }
            .tree-node-secondary {
                @apply bg-white border-2 border-secondary text-secondary;
            }
            .tree-node-accent {
                @apply bg-white border-2 border-accent text-accent;
            }
            .tree-node-neutral {
                @apply bg-white border-2 border-neutral text-neutral;
            }
            .connector {
                @apply absolute bg-gray-300 z-0 transition-all duration-300;
            }
            .connector-horizontal {
                @apply h-1 w-full top-1/2 -translate-y-1/2;
            }
            .connector-vertical {
                @apply w-1 h-full left-1/2 -translate-x-1/2;
            }
            .connector-corner {
                @apply w-8 h-8 border-b-2 border-r-2 border-gray-300 absolute transform rotate-45 -translate-y-4 translate-x-4;
            }
            .section-header {
                @apply text-xl font-bold mb-4 pb-2 border-b-2 border-gray-200;
            }
            .feature-card {
                @apply p-4 rounded-lg shadow-md bg-white hover:shadow-lg transition-all duration-300;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-7xl">
        <!-- 页面标题 -->
        <header class="text-center mb-12 animate-fade-in">
            <h1 class="text-4xl font-bold text-gray-800 mb-4">RPGLogic 系统架构思维导图</h1>
            <p class="text-gray-600 max-w-3xl mx-auto">MMORPG游戏状态机系统的可视化架构展示，基于暗黑破坏神2游戏机制设计</p>
        </header>

        <!-- 核心类部分 -->
        <section class="mb-16 animate-slide-in">
            <h2 class="section-header text-primary">1. 核心类</h2>
            <div class="relative">
                <!-- RPGLogic 主节点 -->
                <div class="tree-node tree-node-primary max-w-2xl mx-auto mb-16">
                    <h3 class="text-2xl font-bold mb-4">RPGLogic</h3>
                    
                    <!-- 私有成员 -->
                    <div class="mb-6">
                        <h4 class="text-lg font-semibold mb-2 flex items-center"><i class="fa fa-lock mr-2"></i>私有成员</h4>
                        <ul class="grid grid-cols-1 md:grid-cols-2 gap-2">
                            <li class="flex items-center"><i class="fa fa-dot-circle-o mr-2"></i>currentState (GameState)</li>
                            <li class="flex items-center"><i class="fa fa-dot-circle-o mr-2"></i>stateManager (StateManager)</li>
                            <li class="flex items-center"><i class="fa fa-dot-circle-o mr-2"></i>inputHandler (InputHandler)</li>
                            <li class="flex items-center"><i class="fa fa-dot-circle-o mr-2"></i>gameInitializer (GameInitializer)</li>
                            <li class="flex items-center"><i class="fa fa-dot-circle-o mr-2"></i>stateEventManager (StateEventManager)</li>
                        </ul>
                    </div>

                    <!-- 功能分类 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- 状态管理方法 -->
                        <div>
                            <h4 class="text-lg font-semibold mb-2 flex items-center"><i class="fa fa-random mr-2"></i>状态管理方法</h4>
                            <ul class="space-y-1">
                                <li class="hover:bg-primary-dark p-1 rounded transition-colors"><code>update()</code> - 更新当前状态</li>
                                <li class="hover:bg-primary-dark p-1 rounded transition-colors"><code>getCurrentState()</code> - 获取当前游戏状态</li>
                                <li class="hover:bg-primary-dark p-1 rounded transition-colors"><code>forceStateChange(state)</code> - 强制转换状态</li>
                                <li class="hover:bg-primary-dark p-1 rounded transition-colors"><code>triggerCombat()</code> - 触发战斗状态</li>
                                <li class="hover:bg-primary-dark p-1 rounded transition-colors"><code>triggerDialogue()</code> - 触发对话状态</li>
                                <li class="hover:bg-primary-dark p-1 rounded transition-colors"><code>triggerDeath()</code> - 触发死亡状态</li>
                                <li class="hover:bg-primary-dark p-1 rounded transition-colors"><code>triggerResurrection()</code> - 触发复活状态</li>
                            </ul>
                        </div>

                        <!-- 初始化方法 -->
                        <div>
                            <h4 class="text-lg font-semibold mb-2 flex items-center"><i class="fa fa-cog mr-2"></i>初始化方法</h4>
                            <ul class="space-y-1">
                                <li class="hover:bg-primary-dark p-1 rounded transition-colors"><code>initializeGameData(gameData?)</code> - 初始化游戏数据</li>
                                <li class="hover:bg-primary-dark p-1 rounded transition-colors"><code>reset()</code> - 重置游戏状态</li>
                            </ul>

                            <!-- 输入方法 -->
                            <h4 class="text-lg font-semibold mt-4 mb-2 flex items-center"><i class="fa fa-keyboard-o mr-2"></i>输入方法</h4>
                            <ul class="space-y-1">
                                <li class="hover:bg-primary-dark p-1 rounded transition-colors"><code>handleKeyInput(key, pressed)</code> - 处理键盘输入</li>
                                <li class="hover:bg-primary-dark p-1 rounded transition-colors"><code>handleMouseInput(action, position, button?)</code> - 处理鼠标输入</li>
                                <li class="hover:bg-primary-dark p-1 rounded transition-colors"><code>handleGameEvent(eventName, eventData?)</code> - 处理游戏事件</li>
                            </ul>
                        </div>

                        <!-- 输出方法 -->
                        <div>
                            <h4 class="text-lg font-semibold mb-2 flex items-center"><i class="fa fa-sign-out mr-2"></i>输出方法</h4>
                            <ul class="space-y-1">
                                <li class="hover:bg-primary-dark p-1 rounded transition-colors"><code>getGameStateSnapshot()</code> - 获取游戏状态快照</li>
                                <li class="hover:bg-primary-dark p-1 rounded transition-colors"><code>onStateChange(callback)</code> - 注册状态变化回调</li>
                            </ul>
                        </div>

                        <!-- 扩展方法 -->
                        <div>
                            <h4 class="text-lg font-semibold mb-2 flex items-center"><i class="fa fa-expand mr-2"></i>扩展方法</h4>
                            <ul class="space-y-1">
                                <li class="hover:bg-primary-dark p-1 rounded transition-colors"><code>getPlayerData()</code> - 获取玩家数据</li>
                                <li class="hover:bg-primary-dark p-1 rounded transition-colors"><code>updatePlayerData(newData)</code> - 更新玩家数据</li>
                                <li class="hover:bg-primary-dark p-1 rounded transition-colors"><code>getWorldData()</code> - 获取世界数据</li>
                                <li class="hover:bg-primary-dark p-1 rounded transition-colors"><code>updateWorldData(newData)</code> - 更新世界数据</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 依赖组件部分 -->
        <section class="mb-16 animate-slide-in">
            <h2 class="section-header text-secondary">2. 依赖组件</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- StateManager -->
                <div class="tree-node tree-node-secondary">
                    <h3 class="text-xl font-bold mb-4">StateManager</h3>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-semibold mb-2">私有成员</h4>
                            <ul class="ml-5 list-disc space-y-1">
                                <li>transitions (TransitionMap)</li>
                                <li>stateActions (StateActionMap)</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold mb-2">初始化方法</h4>
                            <ul class="ml-5 list-disc space-y-1">
                                <li><code>initTransitions()</code> - 初始化状态转换条件</li>
                                <li><code>initStateActions()</code> - 初始化状态行为</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold mb-2">获取方法</h4>
                            <ul class="ml-5 list-disc space-y-1">
                                <li><code>getTransitions(state)</code> - 获取指定状态的转换条件</li>
                                <li><code>getStateActions(state)</code> - 获取指定状态的行为</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold mb-2">执行方法</h4>
                            <ul class="ml-5 list-disc space-y-1">
                                <li><code>onEnterState(state)</code> - 执行状态进入行为</li>
                                <li><code>onExitState(state)</code> - 执行状态退出行为</li>
                                <li><code>onUpdateState(state)</code> - 执行状态更新行为</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- InputHandler -->
                <div class="tree-node tree-node-secondary">
                    <h3 class="text-xl font-bold mb-4">InputHandler</h3>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-semibold mb-2">私有成员</h4>
                            <ul class="ml-5 list-disc space-y-1">
                                <li>stateManager (引用到强制状态转换方法)</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold mb-2">输入处理方法</h4>
                            <ul class="ml-5 list-disc space-y-1">
                                <li><code>handleKeyInput(key, pressed, currentState)</code> - 处理键盘输入</li>
                                <li><code>handleMouseInput(action, position, button?, currentState)</code> - 处理鼠标输入</li>
                                <li><code>handleGameEvent(eventName, eventData?)</code> - 处理游戏事件</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold mb-2">状态特定处理方法</h4>
                            <ul class="ml-5 list-disc space-y-1">
                                <li><code>handleExplorationKeyInput(key, pressed)</code></li>
                                <li><code>handleCombatKeyInput(key, pressed)</code></li>
                                <li><code>handleMenuKeyInput(key, pressed)</code></li>
                                <li><code>handleExplorationMouseInput(action, position, button?)</code></li>
                                <li><code>handleCombatMouseInput(action, position, button?)</code></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- GameInitializer -->
                <div class="tree-node tree-node-secondary">
                    <h3 class="text-xl font-bold mb-4">GameInitializer</h3>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-semibold mb-2">私有成员</h4>
                            <ul class="ml-5 list-disc space-y-1">
                                <li>gameData (存储玩家和世界数据)</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold mb-2">初始化方法</h4>
                            <ul class="ml-5 list-disc space-y-1">
                                <li><code>initializeGameData(data?)</code> - 初始化游戏数据</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold mb-2">快照方法</h4>
                            <ul class="ml-5 list-disc space-y-1">
                                <li><code>getGameStateSnapshot(currentState, possibleTransitions)</code> - 获取游戏状态快照</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold mb-2">数据访问方法</h4>
                            <ul class="ml-5 list-disc space-y-1">
                                <li><code>getPlayerData()</code> - 获取玩家数据</li>
                                <li><code>getWorldData()</code> - 获取世界数据</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold mb-2">数据更新方法</h4>
                            <ul class="ml-5 list-disc space-y-1">
                                <li><code>updatePlayerData(newData)</code> - 更新玩家数据</li>
                                <li><code>updateWorldData(newData)</code> - 更新世界数据</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold mb-2">重置方法</h4>
                            <ul class="ml-5 list-disc space-y-1">
                                <li><code>resetGameData()</code> - 重置游戏数据</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- StateEventManager -->
                <div class="tree-node tree-node-secondary">
                    <h3 class="text-xl font-bold mb-4">StateEventManager</h3>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-semibold mb-2">私有成员</h4>
                            <ul class="ml-5 list-disc space-y-1">
                                <li>stateChangeCallbacks (Set&lt;StateChangeCallback&gt;)</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold mb-2">回调管理方法</h4>
                            <ul class="ml-5 list-disc space-y-1">
                                <li><code>onStateChange(callback)</code> - 注册状态变化回调</li>
                                <li><code>clearCallbacks()</code> - 清除所有回调函数</li>
                                <li><code>getCallbackCount()</code> - 获取回调函数数量</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold mb-2">事件触发方法</h4>
                            <ul class="ml-5 list-disc space-y-1">
                                <li><code>triggerStateChange(fromState, toState)</code> - 触发状态变化事件</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 类型系统部分 -->
        <section class="mb-16 animate-slide-in">
            <h2 class="section-header text-accent">3. 类型系统</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- 游戏状态 -->
                <div class="tree-node tree-node-accent">
                    <h3 class="text-xl font-bold mb-4">游戏状态</h3>
                    <div class="mb-4">
                        <h4 class="font-semibold mb-2">GAME_STATES (枚举常量)</h4>
                        <div class="flex flex-wrap gap-2">
                            <span class="bg-accent/10 px-2 py-1 rounded text-sm">IDLE</span>
                            <span class="bg-accent/10 px-2 py-1 rounded text-sm">EXPLORATION</span>
                            <span class="bg-accent/10 px-2 py-1 rounded text-sm">COMBAT</span>
                            <span class="bg-accent/10 px-2 py-1 rounded text-sm">DIALOGUE</span>
                            <span class="bg-accent/10 px-2 py-1 rounded text-sm">TRADING</span>
                            <span class="bg-accent/10 px-2 py-1 rounded text-sm">MENU</span>
                            <span class="bg-accent/10 px-2 py-1 rounded text-sm">CHARACTER_PANEL</span>
                            <span class="bg-accent/10 px-2 py-1 rounded text-sm">INVENTORY</span>
                            <span class="bg-accent/10 px-2 py-1 rounded text-sm">DEATH</span>
                        </div>
                    </div>
                    <div>
                        <h4 class="font-semibold mb-2">GameState (类型别名)</h4>
                        <code class="bg-gray-100 px-2 py-1 rounded text-sm">typeof GAME_STATES[keyof typeof GAME_STATES]</code>
                    </div>
                </div>

                <!-- 状态转换 -->
                <div class="tree-node tree-node-accent">
                    <h3 class="text-xl font-bold mb-4">状态转换</h3>
                    <div class="space-y-3">
                        <div>
                            <h4 class="font-semibold mb-1">Transition (接口)</h4>
                            <pre class="bg-gray-100 p-2 rounded text-sm whitespace-pre-wrap">{
  to: GameState;
  condition: () => boolean;
}</pre>
                        </div>
                        <div>
                            <h4 class="font-semibold mb-1">TransitionMap (接口)</h4>
                            <pre class="bg-gray-100 p-2 rounded text-sm whitespace-pre-wrap">{
  [key: string]: Transition[];
}</pre>
                        </div>
                        <div>
                            <h4 class="font-semibold mb-1">StateActions (接口)</h4>
                            <pre class="bg-gray-100 p-2 rounded text-sm whitespace-pre-wrap">{
  enter?: () => void;
  update?: () => void;
  exit?: () => void;
}</pre>
                        </div>
                        <div>
                            <h4 class="font-semibold mb-1">StateActionMap (接口)</h4>
                            <pre class="bg-gray-100 p-2 rounded text-sm whitespace-pre-wrap">{
  [key: string]: StateActions;
}</pre>
                        </div>
                    </div>
                </div>

                <!-- 游戏数据 -->
                <div class="tree-node tree-node-accent">
                    <h3 class="text-xl font-bold mb-4">游戏数据</h3>
                    <div class="space-y-3">
                        <div>
                            <h4 class="font-semibold mb-1">GameData (接口)</h4>
                            <pre class="bg-gray-100 p-2 rounded text-sm whitespace-pre-wrap">{
  initialState?: GameState;
  playerData?: any;
  worldData?: any;
}</pre>
                        </div>
                        <div>
                            <h4 class="font-semibold mb-1">GameStateSnapshot (接口)</h4>
                            <pre class="bg-gray-100 p-2 rounded text-sm whitespace-pre-wrap">{
  currentState: GameState;
  availableStates: GameState[];
  possibleTransitions: GameState[];
}</pre>
                        </div>
                    </div>
                </div>

                <!-- 其他类型 -->
                <div class="tree-node tree-node-accent">
                    <h3 class="text-xl font-bold mb-4">其他类型</h3>
                    <div class="space-y-3">
                        <div>
                            <h4 class="font-semibold mb-1">MousePosition (接口)</h4>
                            <pre class="bg-gray-100 p-2 rounded text-sm whitespace-pre-wrap">{
  x: number;
  y: number;
}</pre>
                        </div>
                        <div>
                            <h4 class="font-semibold mb-1">StateChangeCallback (类型别名)</h4>
                            <pre class="bg-gray-100 p-2 rounded text-sm whitespace-pre-wrap">(fromState: GameState, toState: GameState) => void</pre>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 核心功能说明 -->
        <section class="mb-16 animate-slide-in">
            <h2 class="section-header text-neutral">4. 核心功能说明</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- 状态管理系统 -->
                <div class="feature-card">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 bg-primary/20 rounded-full flex items-center justify-center mr-3">
                            <i class="fa fa-random text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">状态管理系统</h3>
                    </div>
                    <ul class="space-y-3">
                        <li class="flex">
                            <span class="font-semibold mr-2 min-w-[70px]">主要功能:</span>
                            <span>管理游戏状态的切换、状态行为的执行</span>
                        </li>
                        <li class="flex">
                            <span class="font-semibold mr-2 min-w-[70px]">关键特性:</span>
                            <span>基于状态机模式，支持定义状态转换条件和状态特定行为</span>
                        </li>
                        <li class="flex">
                            <span class="font-semibold mr-2 min-w-[70px]">典型用例:</span>
                            <span>从探索状态切换到战斗状态、打开角色面板等</span>
                        </li>
                    </ul>
                </div>

                <!-- 输入处理系统 -->
                <div class="feature-card">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 bg-secondary/20 rounded-full flex items-center justify-center mr-3">
                            <i class="fa fa-keyboard-o text-secondary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">输入处理系统</h3>
                    </div>
                    <ul class="space-y-3">
                        <li class="flex">
                            <span class="font-semibold mr-2 min-w-[70px]">主要功能:</span>
                            <span>处理键盘、鼠标输入以及游戏事件</span>
                        </li>
                        <li class="flex">
                            <span class="font-semibold mr-2 min-w-[70px]">关键特性:</span>
                            <span>基于当前游戏状态的上下文感知输入处理</span>
                        </li>
                        <li class="flex">
                            <span class="font-semibold mr-2 min-w-[70px]">典型用例:</span>
                            <span>按下ESC打开菜单、点击NPC触发对话</span>
                        </li>
                    </ul>
                </div>

                <!-- 游戏数据管理 -->
                <div class="feature-card">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 bg-accent/20 rounded-full flex items-center justify-center mr-3">
                            <i class="fa fa-database text-accent text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">游戏数据管理</h3>
                    </div>
                    <ul class="space-y-3">
                        <li class="flex">
                            <span class="font-semibold mr-2 min-w-[70px]">主要功能:</span>
                            <span>初始化、访问和更新游戏数据</span>
                        </li>
                        <li class="flex">
                            <span class="font-semibold mr-2 min-w-[70px]">关键特性:</span>
                            <span>支持自定义初始数据、数据快照生成</span>
                        </li>
                        <li class="flex">
                            <span class="font-semibold mr-2 min-w-[70px]">典型用例:</span>
                            <span>加载存档、更新玩家属性</span>
                        </li>
                    </ul>
                </div>

                <!-- 事件系统 -->
                <div class="feature-card">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 bg-neutral/20 rounded-full flex items-center justify-center mr-3">
                            <i class="fa fa-bell text-neutral text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">事件系统</h3>
                    </div>
                    <ul class="space-y-3">
                        <li class="flex">
                            <span class="font-semibold mr-2 min-w-[70px]">主要功能:</span>
                            <span>管理状态变化事件的订阅和通知</span>
                        </li>
                        <li class="flex">
                            <span class="font-semibold mr-2 min-w-[70px]">关键特性:</span>
                            <span>基于观察者模式，支持动态添加和移除事件监听器</span>
                        </li>
                        <li class="flex">
                            <span class="font-semibold mr-2 min-w-[70px]">典型用例:</span>
                            <span>UI更新、音效触发、成就解锁等</span>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- 使用示例 -->
        <section class="animate-slide-in">
            <h2 class="section-header text-neutral">5. 使用示例</h2>
            <div class="bg-white rounded-lg shadow-md p-6 overflow-x-auto">
                <pre class="text-sm text-gray-800 whitespace-pre-wrap"><code>// 1. 创建RPGLogic实例
const rpgLogic = new RPGLogic();

// 2. 初始化游戏数据
const initialData = {
  initialState: GAME_STATES.EXPLORATION,
  playerData: {
    name: 'Hero',
    level: 1,
    health: 100
  },
  worldData: {
    currentMap: 'village'
  }
};
rpgLogic.initializeGameData(initialData);

// 3. 注册状态变化监听
const unsubscribe = rpgLogic.onStateChange((fromState, toState) => {
  console.log(`状态从 ${fromState} 变为 ${toState}`);
});

// 4. 处理输入
rpgLogic.handleKeyInput('Escape', true); // 打开菜单
rpgLogic.handleMouseInput('click', { x: 100, y: 200 }, 'left'); // 处理鼠标点击

// 5. 游戏循环中更新状态
function gameLoop() {
  rpgLogic.update();
  requestAnimationFrame(gameLoop);
}
gameLoop();

// 6. 强制状态转换
rpgLogic.triggerCombat(); // 进入战斗状态

// 7. 清理资源
unsubscribe(); // 取消状态变化监听</code></pre>
            </div>
        </section>

        <!-- 页脚 -->
        <footer class="mt-16 text-center text-gray-500 text-sm">
            <p>RPGLogic 系统架构思维导图 © 2023</p>
        </footer>
    </div>

    <!-- 简单的交互功能 -->
    <script>
        // 为所有树节点添加点击展开/折叠功能
        document.addEventListener('DOMContentLoaded', function() {
            const treeNodes = document.querySelectorAll('.tree-node');
            treeNodes.forEach(node => {
                let isExpanded = true;
                const content = node.innerHTML;
                const title = node.querySelector('h3')?.textContent || '节点';
                
                node.addEventListener('click', function(e) {
                    // 忽略链接和按钮的点击
                    if (e.target.tagName === 'A' || e.target.tagName === 'BUTTON' || e.target.closest('a') || e.target.closest('button')) {
                        return;
                    }
                    
                    isExpanded = !isExpanded;
                    
                    if (!isExpanded) {
                        node.innerHTML = `<h3 class="text-xl font-bold">${title} <i class="fa fa-chevron-down ml-2"></i></h3>`;
                    } else {
                        node.innerHTML = content;
                    }
                });
            });
        });
    </script>
</body>
</html>